<template>
<el-dialog title="活动信息" :visible.sync="showaddvideoDialog" center height="1000px" width="1000px">
  <div class="navigationBar" style="width: 98%;margin: 10px auto 0">
    <el-row :gutter="26">
      <!-- 搜索框 -->
      <el-col :span="3">
        <el-input v-model="storename" placeholder="机构" clearable></el-input>
      </el-col>
      <el-col :span="3.3">
        <el-input v-model="username" placeholder="用户"></el-input>
      </el-col>
      <el-col  :span="4">
        <el-button type="primary" icon="el-icon-search" @click="searchActivity">搜索</el-button>
      </el-col>
    </el-row>
  </div>
  <div class="container">
    <div class="navigationBar" style="width: 98%;margin: 10px auto 0">
      
      <el-table  :data="addvideoList" style="width: 98%;margin: 10px auto 0" border :key="addvideoList.length" class="table" v-loading="loading" element-loading-text="拼命加载中....">
        
        <el-table-column label="所属用户" align="center">
          <template slot-scope="{row}">
            <span>{{row.customer_name}}</span>
          </template>
        </el-table-column>

        <el-table-column label="所属机构" align="center">
          <template slot-scope="{row}">
            <span>{{row.store_name}}</span>
          </template>
        </el-table-column>

        <el-table-column label="上传时间" align="center">
          <template slot-scope="{row}">
            <span>{{newtime(row.create_time)}}</span>
          </template>
        </el-table-column>

        <el-table-column label="课程科目" align="center">
          <template slot-scope="{row}">
            <span>{{row.subjects_id}}</span>
          </template>
        </el-table-column>

        <el-table-column label="默认点赞人数" align="center">
          <template slot-scope="{row}">
            <span>{{row.distance}}</span>
          </template>
        </el-table-column>

        <el-table-column label="上架课程" align="center">
          <template slot-scope="{row}" v-if="row.subjects!=''">
            <span v-for="(subject,id) in row.subjects" :key="id">{{subject.name}}</span>
          </template>
          <template>
            <span>无关联课程</span>
          </template>
        </el-table-column>
        
        <el-table-column label="上架礼盒" align="center">
          <template class="block" slot-scope="{row}">
            <span>{{row.gift_activity_title}}</span>
            <!-- <img v-if="row.head_img.length>20" :src="row.head_img" lazy="true" width="50px" @click="openvideo(row.video_url)"></img> -->
          </template>
        </el-table-column>

        <el-table-column label="视频" align="center">
          <template slot-scope="{row}">
            <div :style="{backgroundImage:'url('+row.head_img+')'}" class="image1">
              <i class="el-icon-video-play" style="font-size:50px" @click="openvideo(row.video_url)"></i>
            </div>
            <!-- <img :src="row.head_img" width="100%" @click="openvideo(row.video_url)"/> -->
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="{row}">
            <el-checkbox v-model="row.recommend" label="" @change="modifystatus(row.id,row.recommend)"></el-checkbox>
          </template>
        </el-table-column>
        <el-dialog
          width="30%"
          title="视频"
          :visible.sync="dialogVisible1"
          append-to-body
          :before-close="handleClose">
          <video id="myVideo" width='100%' controls>
            <source :src='video' type="video/mp4">
          </video>
          <!-- <iframe width='100%' :src='video' frameborder='0' allowfullscreen></iframe> -->
        </el-dialog> 
      </el-table>
      <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.listQuery.page-1"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="this.listQuery.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.listQuery.total">
      </el-pagination>
    </div>
    </div>
  </div>
</el-dialog>
</template>
<script>
import store from '@/store'
  import {list, del, edit} from '@/api/thk/activity'
  import {list as getCustomerList} from '@/api/thk/customer'
  import {list as getStoreList} from '@/api/thk/store'
  import {getSubject} from '@/api/thk/store'
  import {getActivityPerformance} from '@/api/thk/performance'
  import request from '@/utils/request'
  import {upd_type_recommend,getlist} from '@/api/thk/ashortvideo'
  // import {getlist,upd,getrecommendlist,upd_type_recommend} from '@/api/thk/ashortvideo'




  export default {
    name: 'videorecommended',
    components: {
      
    },
    data() {
      return {
        // save storeList field
        addvideoList: [],
        subject:[],
        bigImageSrc: null,
        showaddvideoDialog:false,
        dialogVisible: false,
        dialogVisible1:false,
        customerList: [],
        storeList: [],
        detail:"",
        formThead: {
          user:true,
          shop:true,
          upload_time:true,
          course_subjects:true,
          default_like:true,
          on_course:true,
          shelves_box:true,
          video:true,
          to_audit:true,
          not_through:true,
          through:true
        },

        listQuery: {
          name: undefined,
          detail:undefined,
          time: null,
          page: 1,
          pagesize: 10
        },

        loading: true,
        total: 0,
        value1: '',
        storename:'',
        username:'',

        detail: '',
        subjects:'',
        welfare:'',
        head_img:'',
        video:'',
        video_id:undefined,
      }
    },
    inject: ['reload'],
    // created生命周期中调用获取活动列表方法
    created() {
        // this.getvideoList();
        // this.getSubject();
        this.loading=false;
    },

    updated() {
      this.$nextTick(function(){
        this.loading = false
      })
    },

    methods: {
      newtime(num){
        return new Date(num*1000).toLocaleString();
      },
      handleSizeChange(val) {
        this.listQuery.pagesize = val
        this.getaddvideoList()
      },
      handleCurrentChange(val) {
        this.listQuery.page = val
        this.getaddvideoList()
      },
      searchActivity(){
        this.getname()
        this.getaddvideoList()
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
        let videos=document.getElementById("myVideo")
        videos.pause()
      },
      opendetail(detail){
        
      },
      Changestate(id,type,status,index){
        
      },
      opendetail(item){
        this.dialogVisible=true
        this.detail=item.video_detail
        this.subjects=item.activity_title
        this.welfare=item.gift_activity_title
        this.head_img=item.head_img
        this.video=item.video_url
        this.video_id=item.id
      },
      openvideo(item){
        this.dialogVisible1=true
        this.video=item
        console.log(this.video)
      },
      getname(){
        this.listQuery.storename=this.storename
        this.listQuery.username=this.username
      },
      delrecommended(){
        let num=0;
        this.$confirm('此操作将会删除推荐视频, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type:'success',
            message:'移除成功'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
        console.log(this.customerList)
      },
      getSubject(){
        getSubject(store.getters.token).then(res=>{
          this.subject=res.data.data
          console.log(this.subject,"666")
        }).catch(err=>{
          this.$message({
            type:'error',
            message:'err.data.msg'
          })
        })
      },
      getcourse(item,subject){
        if(item!=null){
          item.subjects_id.filter(res=>{
            if(subject.id===res){
              console.log(subject.name,"6677");
              return 0;
            }
          })
        }
      },
      openaddvideoDialog(){
        // console.log("7777777")
        // console.log(row);
        this.showaddvideoDialog=!this.showaddvideoDialog;
        this.getaddvideoList()
        console.log(this.addvideoList);
      },
      getaddvideoList(){
        const token=store.getters.token;
        console.log(token);
        console.log(this.listQuery);
        getlist(token,this.storename,this.username,this.listQuery.page,this.listQuery.pagesize).then(res=>{
          const ress=res.data.data.data
          console.log("video",ress)
          this.listQuery.total=parseInt(res.data.data.total)
          this.listQuery.page=parseInt(res.data.data.last_page)
          this.listQuery.pagesize=parseInt(res.data.data.per_page)
          this.addvideoList=ress.filter(item=>{
            if(this.username!=''){
              item.time=this.newtime(item.create_time)
              if(item.is_recommend===0){
                item.recommend=false
              }else{
                item.recommend=true
              }
              if(item.customer_name.match(this.username)){
                return item
              }
            }else{
              item.time=this.newtime(item.create_time)
              if(item.is_recommend===0){
                item.recommend=false
              }else{
                item.recommend=true
              }
              return item
            }
          })
        })
      },
      modifystatus(id,upd_types){
        this.showaddvideoDialog=!this.showaddvideoDialog
        const token=store.getters.token
        console.log(token)
        console.log(id,upd_types)
        upd_type_recommend(token,id,upd_types).then(res=>{
          console.log(res,"9528")
          this.reload()
        })
      }
    }
  }
</script>
<style scoped>
.image1{
  /* width: 100px;
  height: 200px; */
  background-repeat:no-repeat;
	background-size:100% 100%;
  -moz-background-size:100% 100%;
  color:black
}
.image1:hover{
  color:white
}
</style>